<template>
	<view>
		<u-sticky>
			<view>
				<view class=""><u-search placeholder="搜索" v-model="keyword" :showAction="false"></u-search></view>
			</view>
		</u-sticky>
		<div class="list">
			<u-index-list :index-list="indexList" custom-nav-height="150">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" @click="getphone(cell.phone)" v-for="(cell, index) in item">{{ cell.name }}</view>
					</u-index-item>
				</template>
			</u-index-list>
		</div>
	</view>
</template>

<script>
import { groupSort } from '@/utils/groupSort.js';
export default {
	data() {
		return {
			/* 搜素 */
			keyword: '',
			/* 排序 */
			indexList: [],
			itemArr: [],
			active: 1,
			list: []
		};
	},
	mounted() {
		this.getdata();
	},
	watch: {
		active() {
			this.getdata();
		}
	},
	methods: {
		getphone(e) {
			uni.makePhoneCall({
				phoneNumber: e
			});
		},
		dianhuaben() {
			return {
				code: 200,
				data: [
					{
						name: '宋江1',
						phone: '123456789'
					},
					{
						name: '卢俊义1',
						phone: '123456789'
					},
					{
						name: '吴用1',
						phone: '123456789'
					},
					{
						name: '公孙胜1',
						phone: '123456789'
					},
					{
						name: '关胜1',
						phone: '123456789'
					},
					{
						name: '林冲1',
						phone: '123456789'
					},
					{
						name: '秦明1',
						phone: '123456789'
					},
					{
						name: '呼延灼1',
						phone: '123456789'
					},
					{
						name: '花荣1',
						phone: '123456789'
					},
					{
						name: '柴进1',
						phone: '123456789'
					},
					{
						name: '李应1',
						phone: '123456789'
					},
					{
						name: '朱仝1',
						phone: '123456789'
					},
					{
						name: '鲁智深1',
						phone: '123456789'
					},
					{
						name: '武松1',
						phone: '123456789'
					},
					{
						name: '董平1',
						phone: '123456789'
					},
					{
						name: '张清1',
						phone: '123456789'
					},
					{
						name: '杨志1',
						phone: '123456789'
					},
					{
						name: '徐宁1',
						phone: '123456789'
					},
					{
						name: '索超1',
						phone: '123456789'
					},
					{
						name: '戴宗1',
						phone: '123456789'
					},
					{
						name: '刘唐1',
						phone: '123456789'
					},
					{
						name: '李逵1',
						phone: '123456789'
					},
					{
						name: '史进1',
						phone: '123456789'
					},
					{
						name: '穆弘1',
						phone: '123456789'
					},
					{
						name: '雷横1',
						phone: '123456789'
					},
					{
						name: '李俊1',
						phone: '123456789'
					}
				]
			};
		},

		getdata() {
			var that = this;
			let { data } = this.dianhuaben();
			that.indexList = [];
			that.itemArr = [];
			that.list = groupSort(data, 'name');
			Object.keys(that.list).forEach(function(key) {
				that.indexList.push(key);
				that.itemArr.push(that.list[key]);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
</style>
<style scoped lang="scss">
/* 字母背景色 */
::v-deep .u-index-anchor {
	background-color: #fff !important;
}
/* 下划线 */
.u-border-bottom {
	border: none !important;
}

.listItem {
	width: 690rpx;
	height: 160rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
	align-content: flex-start;
	margin-top: 30rpx;

	.listIteml {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}

		.listItemld {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-wrap: nowrap;
			flex-direction: column;
			align-content: flex-start;

			.tel {
				font-family: PingFangSC-Medium;
				font-size: 40rpx;
				color: #333333;
				font-weight: 500;
			}

			.desc {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #555555;
				font-weight: 400;
			}
		}
	}

	.listItemr {
		margin-right: 30rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.tabs {
	width: 750rpx;
	background: #fff;
	height: 90rpx;
}

.list-cell {
	background: #fff;
	height: 80rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 30rpx;
	flex-wrap: nowrap;
	border-bottom: 1rpx solid #ebebec;
	flex-direction: row;
	align-content: flex-start;
}
</style>
